<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="js/jquery.validation/1.14.0/messages_zh.min.js"></script>
<style>
    input.error {
        border: 1px solid #E6594E;
    }
</style>
<body>
<div class="container">
    <form id="addUserForm">
        <br/>
        <div class="form-group">
            <label for="username">用户名称：</label>
            <input type="text" class="form-control" id="username" name="username" placeholder="输入名称">
        </div>
        <div class="form-group">
            <label for="userage">用户年龄：</label>
            <input type="text" class="form-control" id="userage" name="userage" placeholder="输入年龄">
        </div>
        <div class="form-group">
            <button type="button" id="saveBtn" class="btn btn-success">提交</button>
            <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
        </div>
    </form>
</div>
<script>
    // 定义一个名为 addUser 的函数
    var addUser = function () {

        // 调用 check 函数检查表单是否有效，如果无效则直接返回
        if (!check().form()) {

            return;

        }

        // 使用 jQuery 发送 AJAX 请求
        $.ajax({

            // 设置请求类型为 POST
            type: "post",

            // 设置数据类型为 JSON
            dataType: "json",

            // 指定服务器端处理程序的 URL
            url: "/add",

            // 设置要发送的数据对象
            data: {

                // 从 ID 为 username 的元素获取值作为 name 参数
                "name": $("#username").val(),

                // 从 ID 为 userage 的元素获取值作为 age 参数
                "age": $("#userage").val()

            },

            // 当服务器成功响应后执行的回调函数
            success: function (msg) {

                // 触发 ID 为 cancelBtn 的元素的 click 事件来关闭或重置当前对话框
                $("#cancelBtn").click();

            }

        });

    };
    // 为 ID 为 saveBtn 的元素绑定点击事件处理器
    $("#saveBtn").click(function () {

        // 当点击事件触发时，调用 addUser 函数以执行添加用户操作
        addUser();

    });

    // 为 ID 为 cancelBtn 的元素绑定点击事件处理器
    $("#cancelBtn").click(function () {

        // 获取当前窗口在父级页面 layer 弹窗中的索引
        var index = parent.layer.getFrameIndex(window.name);

        // 调用父级页面的 getUserPageList 方法来刷新用户列表
        parent.getUserPageList();

        // 关闭当前 layer 弹出层
        parent.layer.close(index);

    });

    // 定义一个名为 check 的函数用于验证表单数据
    function check() {

        // 返回使用 jQuery Validate 插件初始化的验证器对象
        return $("#addUserForm").validate({

            // 设置需要验证的规则
            rules: {

                // 验证用户名字段是否为空
                username: {

                    required: true

                },

                // 验证年龄字段是否为空
                userage: {

                    required: true

                }

            },

            // 设置当验证失败时显示的消息
            messages: {

                // 如果用户名为空，则显示空字符串（这里可能需要填写具体的错误提示信息）
                username: {

                    required: ""

                },

                // 如果年龄为空，则显示空字符串（这里可能需要填写具体的错误提示信息）
                userage: {

                    required: ""

                }

            }

        });

    }

</script>
</body>
</html>